<template>
    <div>
      <div class="classify">
          <ul>
              <router-link to="/usercenter">
                <li class="iconfont active"><a href="###" class="active">&#xe616;个人信息</a></li>
              </router-link>
              <router-link to="/like">
                <li class="iconfont"><a href="#/like">&#xe686;我的关注</a></li>
              </router-link>
              <router-link to="/fans">
                <li class="iconfont"><a href="###">&#xe6cf;我的粉丝</a></li>
              </router-link>
              <router-link to="/collect">
                <li class="iconfont"><a href="###">&#xe60c;我的收藏</a></li>
              </router-link>
              <router-link to="/myblog">
                <li class="iconfont"><a href="###">&#xe6af;我的博客</a></li>
              </router-link>
              <router-link to="myvideo">
                <li class="iconfont"><a href="###">&#xe64e;我的视频</a></li>
              </router-link>
              <router-link to="mybook">
                <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
              </router-link>

          </ul>
      </div>

    </div>
</template>

<script>
export default {
    name: 'classify',
}
</script>

<style lang="stylus" scoped>
.classify
  width 15%
  height auto
  margin-top 5rem
  margin-left 1%
  border 1px #ccc solid
  border-radius 10px
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color #fff
  ul
    padding-top 2rem
    padding-bottom 4rem
    margin-top .5rem
    // background-color red
    li
      width 100%
      margin-top .2rem
      line-height 4rem
      text-align center
      // background-color #fff
    li:hover
      //background-color #26a2ff
      background-color #eee
    .active
      background-color #eee
      color #26a2ff
</style>